<template>
  <div class="drawer">
    <el-drawer
      :visible.sync="$store.state.userManage.drawer"
      :direction="direction"
      :before-close="handleClose"
      size="62.5%"
    >
      <p class="userInfo">特殊用户信息</p>
      <div class="userInfoMain">
        <p>
          <span>姓名：</span>
          <span>{{ userDetail.name }}</span>
        </p>
        <p>
          <span>公司/单位：</span>
          <span>{{ userDetail.company }}</span>
        </p>
        <p>
          <span>职位：</span>
          <span>{{ userDetail.position }}</span>
        </p>
        <p>
          <span>组织：</span>
          <span>{{ userDetail.departName }}</span>
        </p>
        <p>
          <span>手机号：</span>
          <span>{{ userDetail.mobile }}</span>
        </p>
        <p>
          <span>邮箱：</span>
          <span>{{ userDetail.email }}</span>
        </p>
        <p>
          <span>帐号状态：</span>
          <span
            :class="{'green': userDetail.status === 1}"
          >{{ userDetail.status === 1 ? '启用' : '禁用' }}</span>
        </p>
        <p>
          <span>注册时间：</span>
          <span>{{ userDetail.createTime }}</span>
        </p>
      </div>
      <div class="project">关联项目</div>
      <div class="projectMain">
        <table cellspacing="0">
          <thead>
            <th>项目名称</th>
            <th>项目编号</th>
            <th>项目位置</th>
            <th>施工单位</th>
            <th>项目状态</th>
            <th>操作</th>
          </thead>
          <tbody>
            <tr v-for="(item,index) in userDetail.projectInformationList" :key="item.projectId">
              <td style="text-align:left;">{{ item.projectName }}</td>
              <td>{{ item.projectNumber }}</td>
              <td>{{ item.province + item.projectThumAd }}</td>
              <td style="text-align:left;">{{ item.consUnit }}</td>
              <td
                :class="item.projectCompletion === '监测中' ? 'green' : item.projectCompletion === '监测完成' ? 'yellow' : ''"
              >{{ item.projectCompletion }}</td>
              <td><span :style="{color:index > 0?'#146cf1':'#b6bcca'}" @click="dataToTop(item.userProjectId)">置顶</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { toTop, userInfo } from '@/api/sysUserRole'
export default {
  data () {
    return {
      direction: 'rtl'
    }
  },
  computed: {
    userDetail () {
      return this.$store.state.userManage.userDetail
    },
    userId () {
      return sessionStorage.getItem('userId')
    }
  },
  methods: {
    // 点击半透明区域关闭抽屉
    handleClose (done) {
      done()
    },
    dataToTop (id) {
      // console.log(id)
      toTop(id).then(res => {
        if (res.data.code === 200) {
          userInfo(this.userId).then(res => {
            this.$store.commit('userManage/set_userDetail', res.data.data)
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep #el-drawer__title {
  position: relative;
  z-index: 999;
  height: 20px;
}

::v-deep [class*=" el-icon-"] {
  padding-top: 16px;
}

::v-deep .el-drawer {
  overflow-y: auto;
  height: 100%;
  &::-webkit-scrollbar {
    width: 4px;
    height: 120px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(220, 220, 220, 1);
  }
  &::-webkit-scrollbar-track {
    border-radius: 0;
    background: #fff;
  }
}

.drawer {
  .userInfo,
  .project {
    height: 60px;
    background-color: rgba(87, 131, 255, 0.05);
    color: #333333;
    line-height: 60px;
    font-size: 16px;
    padding-left: 30px;
  }
  .userInfoMain {
    height: 480px;
    padding-left: 132px;
    padding-top: 25px;
    p {
      height: 52px;
      line-height: 52px;
      font-size: 16px;
      span {
        display: inline-block;
        &:first-child {
          width: 100px;
          text-align: right;
        }
      }
      .green {
        color: #2ebb25;
      }
    }
  }
  .projectMain {
    padding: 40px 60px;
    table {
      width: 1080px;
      thead {
        th {
          height: 50px;
          width: 216px;
          font-size: 14px;
          font-weight: normal;
          background-color: #f8f8f8;
          border: 1px solid #dcdcdc;
          border-bottom: none;
          border-right: none;
          &:last-child {
            border-right: 1px solid #dcdcdc;
          }
        }
      }
      tbody {
        tr {
          td {
            height: 50px;
            text-align: center;
            border: 1px solid #dcdcdc;
            border-bottom: none;
            border-right: none;
            font-size: 14px;
            color: #333333;
            &:last-child {
              border-right: 1px solid #dcdcdc;
            }
            span{
              cursor: pointer;
              text-decoration-line: underline;
            }
          }
          &:last-child {
            td {
              border-bottom: 1px solid #dcdcdc;
            }
          }
        }
      }
    }
  }
}
</style>
